<template>
  <div class="home">
    <!-- 前往搜索 -->
    <div class="search">
      <van-icon name="location-o" size="0.6rem" color="#fff" />
      <i class="i">小u商城</i>
      <to-search width="50%"></to-search>

    </div>
    <!-- 快速导航 -->
    <div class="nav">
      <cate-vue></cate-vue>
    </div>
    <!-- 轮播图 -->
    <banner-vue></banner-vue>
    <!-- 商品列表 -->
    <goods-vue></goods-vue>
  </div>
</template>

<script>
import cateVue from "./components/cate.vue"
import bannerVue from "./components/banner.vue"
import goodsVue from "./components/goods.vue"
import { mapGetters,mapActions } from "vuex"
export default {
  components:{
    cateVue,
    bannerVue,
    goodsVue
  },
  computed:{
    ...mapGetters({
      cates:"home/cates"
    })
  },
  methods: {
    ...mapActions({
      reqCates:"home/reqCates"
    }),
  },
  mounted() {
    // console.log("user:",this.user);
    //没有数据
    this.reqCates()
  },
}
</script>

<style scoped lang="less">
@import "../../less/index.less";


.cates {
  overflow: hidden;
  a {
    float: left;
    margin: @margin20;
    
  }
}

a {
  display: inline-block;
  margin: @margin20;
}
.search{
  background: @deep;
}
.i{
  font-size: 0.3rem;
  line-height: 0.6rem;
  color: #fff;
  margin-right: 1rem;
}




</style>